<template>
  <div>
    <div :style="backgroundDiv"
      style="margin-top:-1px;padding-bottom:20px;display:flex;
    flex-direction: column;justify-content:start;
    align-items: center;height:100vh;"
    >
      <h1 style="color:#fff;">商务合作</h1>
      <van-field v-model="username" clearable @click="hideTabbar" @input="nameInput" label="姓名:" size="15px" :border="false">
      </van-field>
      <van-field v-model="phone" type="tel" clearable @click="hideTabbar" @input="phoneInput" label="电话:" size="15px" :border="false">
      </van-field>
      <van-field v-model="address" clearable @click="hideTabbar" label="地址:" size="15px"  :border="false"/>
      <van-field
        size="15px"
        :border="false"
        @click="hideTabbar"
        v-model="message"
        rows="2"
        autosize
        label="留言:"
        type="textarea"
        show-word-limit
      />
      <div class="submit">
        <div @click="submit">
          <span
            style="color:red;font-weight: bold;
    font-size: 20px;"
          >加 盟</span>
        </div>
      </div>
      <div @click="callTel('17314248188')" style="width:80%;padding-top: 20px;">
        <span class="span_phone">加盟热线:</span>
        <span style="color: white;font-weight:bold;">&#160; 173-1424-8188</span>
      </div>
    </div>
  </div>
</template>

<script>
import { Row, Col, Field, Image, Toast } from 'vant';
import { saveApply } from '@/api/api';
export default {
  name: 'applyonly',
  data() {
    return {
      backgroundDiv: {
        backgroundImage:
          'url(' + require('@/assets/images/apply_bottom.jpg') + ')',
        backgroundRepeat: 'no-repeat',
        backgroundSize: '100% 100%'
      },
      username: '',
      phone: '',
      address: '',
      message: '',
      nameError: '',
      phoneError: '',
      bgApply1: "https://xintu361.oss-cn-qingdao.aliyuncs.com/8ok9bw6im7rwvnoq7x5c.jpg",
      // 默认屏幕高度
      docmHeight: document.documentElement.clientHeight,  //一开始的屏幕高度
      showHeight: document.documentElement.clientHeight,   //一开始的屏幕高度

    };
  },
  watch:{
    showHeight: 'inputType'
  },
  mounted() {
      // window.onresize监听页面高度的变化
      window.onresize = () => {
        return (() => {
            window.screenHeight = document.body.clientHeight;
            this.showHeight = window.screenHeight;
        })()
      }
  },
  created() {
    document.title = '合作加盟';
  },

  methods: {
    // 检测屏幕高度变化  控制底部导航显隐
    inputType() {
      if (!this.timer) {
          this.timer = true
          let that = this
          setTimeout(() => {
            if (that.docmHeight <= that.showHeight) {
                this.$store.dispatch('showTab');
            }else{
                this.$store.dispatch('hideTab');
            }
            that.timer = false;
          }, 20)
      }
    },
    callTel(tel) {
      window.location.href = 'tel:' + tel;
    },
    nameInput() {
      this.nameError = '';
    },
    phoneInput() {
      this.phoneError = '';
    },
    //点击隐藏底部导航   解决键盘弹出后隐藏闪现问题
    hideTabbar(){
      this.$store.dispatch('hideTab');
    },
    submit() {
      if (this.username == '') {
        Toast('请填写名称！');
        return;
      }
      if (this.phone == '' || this.phone.length != 11) {
        Toast('手机号格式错误！');
        return;
      }
      saveApply({
        name: this.username,
        tel: this.phone,
        address: this.address,
        introduce: this.message
      })
        .then(res => {
          this.$dialog.alert({ message: '感谢您的反馈' });
        })
        .catch(err => {
          this.$dialog.alert({ message: err.data.errmsg });
        });
    }
  },

  components: {
    [Row.name]: Row,
    [Col.name]: Col,
    [Field.name]: Field,
    [Image.name]: Image
  }
};
</script>

<style lang="scss" scoped>
/deep/ .van-field__label {
  width: 70px;
  font-weight: bold;
}

/deep/ .van-field__control {
  color: white;
}

.van-cell-group {
  background-color: transparent;
}

.van-cell {
  background-color: transparent;
  color: white;
  width: 80%;
  border: 1px solid white;
  margin-top: 10px;
  border-radius: 10px;
}

.van-image {
  display: block;
}

.submit {
  background: #fff;
  border-radius: 10px;
  width: 80%;
  height: 42px;
  color: #fff;
  text-align: center;
  line-height: 42px;
  margin-top: 20px;
}

.span_phone {
  height: 24px;
  line-height: 24px;
  font-weight: bold;
  display: -moz-inline-box;
  display: inline-block;
  color: white;
  font-size: 15px;
}
</style>
